<template>
    <div class="nav">
        <el-card>
            <div slot="header"><span>订单管理</span></div>

            <el-form inline :model="formData" size="mini">
                <el-form-item label="订单号">
                    <el-input v-model="formData.orderNo" placeholder="订单号"></el-input>
                </el-form-item>
                <el-form-item label="收货人">
                    <el-input v-model="formData.consignee" placeholder="收货人"></el-input>
                </el-form-item>
                <el-form-item label="手机号">
                    <el-input v-model="formData.phone" placeholder="手机号"></el-input>
                </el-form-item>
                <el-form-item label="订单状态">
                    <el-select v-model="formData.orderState">
                        <el-option value="已受理" label="已受理"></el-option>
                        <el-option value="派送中" label="派送中"></el-option>
                        <el-option value="已完成" label="已完成"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="选择时间">
                    <!-- value-format 值格式 -->

                    <el-date-picker v-model="formData.date" value-format="yyyy-MM-dd HH:mm:ss" type="datetimerange"
                        range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
                </el-form-item>
                <el-form-item>
                    <el-button @click="search" type="primary">查询</el-button>
                </el-form-item>
            </el-form>
            <el-table :data="tableData" border :style="{ width: w + 'px' }">
                <el-table-column label="订单号" prop="orderNo"></el-table-column>
                <el-table-column label="下单时间">
                    <template slot-scope="scope">
                        {{ scope.row.orderTime | formatHms }}
                    </template>
                </el-table-column>
                <el-table-column label="手机号" prop="phone"></el-table-column>
                <el-table-column label="收货人" prop="consignee"></el-table-column>
                <el-table-column label="送货地址" prop="deliverAddress"></el-table-column>
                <el-table-column label="送达时间">
                    <template slot-scope="scope">
                        {{ scope.row.deliveryTime | formatHms }}
                    </template>
                </el-table-column>
                <el-table-column label="用户备注" prop="remarks"></el-table-column>
                <el-table-column label="订单金额" prop="orderAmount"></el-table-column>
                <el-table-column label="订单状态" prop="orderState"></el-table-column>
                <el-table-column fixed="right" label="操作" width="100">
                    <template slot-scope="scope">
                        <el-button type="text" @click="
                            $router.push({
                                path: '/order/order-detail',
                                query: { id: scope.row.id },
                            })
                        " size="small">
                            查看
                        </el-button>
                        <el-button type="text" @click="$router.push(`/order/order-edit/${scope.row.id}`)" size="small">
                            编辑
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>

            <el-pagination class="mt20" :page-size="pageSize" :total="total" :current-page="currentPage"
                @current-change="handleCurrentChange" background layout="total,prev,pager,next,jumper"></el-pagination>
        </el-card>
    </div>
</template>

<script>
import { getOrderListReq } from '@/api/order'
import { formatYMDhms } from '@/filters'

//引入mixins
import resizeTable from '@/mixins/resizeTable'
export default {
    mixins: [resizeTable],
    data() {
        return {
            formData: {
                orderNo: '',
                consignee: '',
                phone: '',
                orderState: '',
                date: [],
            },
            searchForm: {},

            tableData: [],
            currentPage: 1,
            pageSize: 3,
            total: 0,
            w: 0,
        }
    },
    methods: {
        async getData() {
            let currentPage = this.currentPage
            let pageSize = this.pageSize
            let date = JSON.stringify(this.searchForm.date || '')
            let res = await getOrderListReq({
                currentPage,
                pageSize,
                ...this.searchForm,
                date,
            })
            let { total, data } = res.data
            this.total = total
            this.tableData = data
        },
        search() {
            this.currentPage = 1
            this.searchForm = { ...this.formData }

            this.getData()
        },
        handleCurrentChange(val) {
            this.currentPage = val
            this.getData()
        },
    },
    created() {
        this.getData()
    },
}
</script>

<style lang="scss" scoped>
.nav {
    margin: 20px 0px 0px 20px;
}
</style>
